<template>
	<scroll-view class="page b-bg haveBar" id="scrollWrap" scroll-y="true"  @scrolltolower="scrolltolower" lower-threshold="50">
		<view class="userBox">
			<view class="logoBox" @tap='goIndex'>
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<!-- <view class="user">
				<text class="iconfont icon-wode2"></text> 13100688807
			</view> -->
			<!-- <view class="user"></view> -->
			<user></user>
		</view>
	    <banner :banner_image="banner_image"></banner>
		<view class="blockTab">
			<!--  <tab current="4" scrollLeft="500" :goId='goId'></tab> -->
			<tab current="4" scrollLeft='200' :goId='goId'></tab>
		</view>
		<view class="block work-works">
			<view class="work-works-inner">
				   <view class="work-cert-item" v-for="(item,index) in list" :key="index">
					   <view class="border">
						   <view class='title'>
							   <view class="big">社会实践证明</view>
						       <view class="min">姓名：{{item.name}}</view>
						   </view>
						   <view class="btn">
							   <view class="lookBtn" @tap="lookCert(item)">查看证书</view>
						   </view>
					   </view>
				   </view>
<!--				<view class="add-row">-->
<!--					<view class="ad-label">-->
<!--						作者编号：-->
<!--					</view>-->
<!--					<view class="ad-inputBox">-->
<!--						 <uni-easyinput type="text"-->
<!--						 :clear="false"-->
<!--						 clearSize='0'-->
<!--						 v-model="form_data.on"-->
<!--						 placeholder="输入作品编号" />-->
<!--					</view>-->
<!--				</view>-->
			   <!-- <view class="add-row">
			    	<view class="ad-label">
			    		图形验证：
			    	</view>
			    	<view class="ad-inputBox">
			    		 <uni-easyinput type="text"
			    		 :clear="false"
			    		 clearSize='0'
			    		 v-model="form_data.num"
			    		 placeholder="输入作品编号" />
			    	</view>
			    </view> -->
				<!-- <view class="nextBtn">
					<view class="bt bt-a" @tap="nextStep">查询</view>
				</view> -->
				<view class="more-bottom">
					<text v-show="!page.is_bottom">加载中...</text>
					<text v-show="page.is_bottom">没有更多了></text>
				</view>
			</view>
		</view>
		<barCon :is_up="is_up"></barCon>
		<view class="lookImgBox" v-show="lookImg" @tap='closeImg'>
			<img :src="imgurl"  class="img" alt="" @tap.stop='defalut'>
		</view>
	</scroll-view>
</template>
<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				is_up:false,
				banner_image:'',
				goId:'',
				list:[],
				imgurl:"",
				lookImg:false,
				page:{
					is_bottom:false,
					page:1
				}
			};
		},
		onLoad(options) {
			this.goId = options.id;
			this.getdec();
			this.getCert();
		},
		methods:{
			async getCert(res) {
				if(res) {
					this.list = [];
					this.form_data = res;
					this.page = {
						is_bottom:false,
						page:1
					}
				} 
				if(!this.page.is_bottom) {
					const _this = this;
					let postData = {
						page:this.page.page,
						page_count:8
					}
					const res = await this.$http({
						 url: 'user/cert/'+ this.goId,
						  method:'get',
						  data:postData
					})
					// console.log(res);
					// this.is_vote_btn = res.is_vote_btn;
					// this.vote_num = res.vote_remainder_num;
					this.list.push(...res.data);
					// console.log(this.list);
					// console.log(this.list);
					if(res.current_page == res.last_page) {
						this.page.is_bottom = true;
					} else {
						this.page.page ++;
					}
					// console.log(this.list);
				}
			},
			defalut() {
				// console.log('defalut');
			},
			scrolltolower() {
				console.log('对外');
				this.getCert(null);
			},
			closeImg () {
				this.lookImg = false;
			},
			lookCert(item) {
				// console.log(item);
				this.lookImg = true;
				this.imgurl = item.download;
			},
			async getdec() {
				// console.log('运行');
				const res = await this.$httpPub({
					  url: 'activity/'+ this.goId,
					  method:'get',
					  data:{}
				})
			   this.dec = res;
			   this.banner_image = this.dec.banner_image;
			   this.is_up = this.dec.is_upload_btn;
			}
		}
	}
</script>

<style lang="scss">
   .page {
   		.add-form {
   			padding: 0;
   		}
   	}
	
	#scrollWrap {
		width: 100vw;
		height: 100vh;
	}
	.lookImgBox {
		  position: fixed;
		  left:0;
		  right: 0;
		  top:0;
		  bottom: 0;
		  background-color: #000;
		  z-index: 99;
		  @include center();
		  .img {
			  width: 100%;
			  height: auto;
		  }
	}
	
   .block {
   	  width: 100%;
   	  padding: 0rpx 34rpx 40rpx;
   }
   .work-infoBox {
	       // padding-bottom: 0;
	   .work-inner {
		   background-color: #fff;
		   padding: 28rpx;
		   padding-bottom: 7rpx;
		   border-radius: $border-radius;
		   .img-title {
			   width: 281rpx;
			   height: 66rpx;
		   }
		   .work-cont {
			   font-size: 28rpx;
			   line-height: 1.6;
			   .p {
				   margin-bottom: 20rpx;
			   }
		   }
	   }
   }
   .work-works {
	   padding-top: 30rpx;
	  .work-works-inner {
		  background-color: #fff;
		  padding: 30rpx 30rpx;
		  border-radius: $border-radius;
	  }
	  .work-cert-item {
		  width: 100%;
		  height: 108px;
		  border:1px solid #e5b141;
		  padding: 7px;
		  box-sizing: border-box;
		  border-radius: 2px;
		  display: flex;
		  margin-bottom: 10px;
		  .border {
			  display: flex;
			  justify-content: space-around;
			  // padding-left: 10px;
			  // padding-right: 20px;
			  border:1px solid #e5b141;
			  border-radius: 2px;
			  box-sizing: border-box;
			  width: 100%;
			  height: 100%;
			  align-items: center;
			  background-image: url('/static/img/bottomdw.jpg');
			  .title {
				   font-family: '楷体';
				   color:#6e541b;
				   font-weight: bold;
				   font-size: 32rpx;
				   width: 380rpx;
				   flex: none;
				   padding: 0 26rpx;
				   line-height: 1.6;
				   .big {
					   font-size: 36rpx;
				   }
				   .min {
					   font-size: 26rpx;
				   }
				   // background-color: #6e541b;
			  }
			  .btn {
				  width: 200rpx;
				  // background-color: red;
				  flex: none;
				  @include center();
			  }
			  .lookBtn {
				  background-color: #e1544b;
				  color:#fff;
				  width: 156rpx;
				  height: 52rpx;
				  border-radius: 6rpx;
				  @include center();
				  flex: none;
			  }
		  }
	  }
	  .items {
	  	  display: flex;
	  	  justify-content: space-between;
	  	  flex-wrap: wrap;
		  padding-top: 26rpx;
	  	  .item-price {
	  		  width: 310rpx;
	  		  padding-bottom: 32rpx;
	  		  position: relative;
			  .onePrice {
				  background-color: #f24545;
				  border-radius:20rpx 0 20rpx 0;
				  color:#fff;
				  display: inline-block;
				  font-size: 12rpx;
				  padding: 6rpx 18rpx;
				  margin-right: 10rpx;
				  &.two {
					  background-color: #ffad4c;
				  }
			  }
			  .colloct {
				  position: absolute;
				  right: 0;
				  top:0;
				  width: 100rpx;
				  height: 100rpx;
				  color:#f24545;
				  @include center()
				  .iconfont {
					  font-size: 56rpx;
				  }

			  }
			  .tpBtn {
				  width: 100%;
				  height: 67rpx;
				  background-color: #f24545;
				  color: #fff;
				  margin-top: 20rpx;
				  border-radius: 8rpx;
				  font-size: 30rpx;
				  @include center();
				  &.disable{
					  background-color: #f5dede;
					  color:#fff;
				  }
			  }
	  		  .in-lab {
	  			  position: absolute;
	  			  right: 0;
	  			  top:0;
	  			  border-radius: 0 $border-radius 0 $border-radius !important;
	  			  padding: 8rpx 18rpx;
	  			  background-color: #f24545;
	  			  color:#fff;
	  			  font-size: 26rpx;
	  			  &.disable {
	  				  background-color: #e3cbcb;
	  				  color:#fff;
	  			  }
	  		  }
	  		  .imgBox {
	  		  		width: 100%;
	  				height: 232rpx;
	  				border-radius: $border-radius;
	  				overflow: hidden;
	  		  }
	  		  .in-title {
	  			  padding-top: 20rpx;
	  			  height: 100rpx;
	  			  font-size: 30rpx;
	  			  font-weight: 550;
	  			  @include textTwo();
	  		  }
	  		  .in-f-title {
	  			  padding-top: 18rpx;
	  			  font-size: 28rpx;
	  			   @include text();
	  		  }
	  		  .in-time {
	  			  padding-top: 18rpx;
	  			  font-size: 26rpx;
	  			  color:#cccccc;
	  		  }
	  	  }
	  }
   }
   .add-form {
   		   padding: 0;
   		   .add-row {
   			   &.school {
   				    .ad-label { 
   						width: 220rpx;
   					}
   					.ad-inputBox  {
   						width: 444rpx;
						
   					}
   			   }
			   
   			   background-color: #fff;
   			   display: flex;
   			   border-radius: 16rpx;
   			   margin-bottom: 16px;
   			   .ad-label {
   				 width: 180rpx;
   				 height: 100rpx;
   				 font-size: 28rpx;
   				 @include center();
   			   }
   			   .ad-inputBox {
   				 width: 510rpx;
   				 height: 100rpx;
				 background-color: #f7f7f7 !important;
				 border-radius: 7px;
   				 @include center();
   			   }
   		   }
		   .nextBtn {
			   padding: 30rpx 0;
			   @include bt-s-1();
		   }
   }
</style>
